<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:icecore="http://www.icefaces.org/icefaces/core"
        xmlns:ace="http://www.icefaces.org/icefaces/components"
        xmlns:ice="http://www.icesoft.com/icefaces/component"  
    >
    <h:head>
        <title>ICEfaces 3</title>
        
    </h:head>
    <h:body>
    <!-- <script type="text/javascript" src="jquery-1.11.1.min.js"></script> --> <!-- src="./jquery/jquery-1.11.1.min.js" -->
    <script type="text/javascript" src="./jquery/jquery-1.11.1.min.js"></script>
    <script>
    
    jQuery.noConflict();
    
    jQuery(document).ready(function(){
    	
    var step = 25;
    var stepSides = 75;
    var scrolling = false;

    // Wire up events for the 'scrollUp' link:
    jQuery("#scrollUp").bind("click", function(event) {
        event.preventDefault();
        // Animates the scrollTop property by the specified
        // step.
        jQuery("#content").animate({
            scrollTop: "-=" + step + "px"
        });
        //código para ejecutar el scrolling al colocar el mouse sobre el link
/*     }).bind("mouseover", function(event) {
        scrolling = true;
        scrollContent("up", "content");
    }).bind("mouseout", function(event) {
        scrolling = false; */
    });


    jQuery("#scrollDown").bind("click", function(event) {
        event.preventDefault();
        jQuery("#content").animate({
            scrollTop: "+=" + step + "px"
        });
      //código para ejecutar el scrolling al colocar el mouse sobre el link
/*     }).bind("mouseover", function(event) {
        scrolling = true;
        scrollContent("down", "content");
    }).bind("mouseout", function(event) {
        scrolling = false; */
    });

    jQuery("#scrollLeft").bind("click", function(event) {
        event.preventDefault();
        jQuery("#contentLarge").animate({
            scrollLeft: "-=" + stepSides + "px"
        });
    });

    jQuery("#scrollRight").bind("click", function(event) {
        event.preventDefault();
        jQuery("#contentLarge").animate({
            scrollLeft: "+=" + stepSides + "px"
        });
    });
    
	    function scrollContent(direction, element) {
	        var amount = (direction === "up" ? "-=1px" : "+=1px");
	        jQuery("#" + element).animate({
	            scrollTop: amount
	        }, 1, function() {
	            if (scrolling) {
	                scrollContent(direction, element);
	            }
	        });
	    }
	    
	});
    
    $( "#target" ).keypress(function() {
    	console.log( "Handler for .keypress() called." );
    	$( "#target" ).click();
    });
    </script>
		<icecore:config mandatoryResource="defaultAction"/>
       <h:form id="iceForm">
        <ace:panel header="Welcome to ICEfaces">
      <h:panelGrid columns="1">
        <ace:linkButton id="linkButton1" value="ICEfaces Overview" href="http://wiki.icesoft.org/display/ICE/ICEfaces+Overview"></ace:linkButton>
        <ace:linkButton id="linkButton2" value="General Documentation" href="http://wiki.icesoft.org/display/ICE/ICEfaces+Documentation"></ace:linkButton>
        <ace:linkButton id="linkButton4" value="Tutorials" href="http://www.icesoft.org/community/tutorials-samples.jsf"></ace:linkButton>
        <ace:linkButton id="linkButton5" value="ACE components" href="http://wiki.icesoft.org/display/ICE/ACE+Components"></ace:linkButton>
     </h:panelGrid>
    </ace:panel>
    <ice:panelGroup>
    	<h:commandButton value="Toggle Popup"
                             action="#{principal.openPopup}"/>
    </ice:panelGroup>
       </h:form>
       <h:form id="panelPopupTest">
       		<icecore:defaultAction action="#{principal.closePopup}" key="Enter" />
       		<ice:panelPopup visible="#{principal.showPopup}"
                            rendered="#{principal.showPopup}"
                            modal="true"
                            autoCentre="true"
                            style="width: 500px;">
                <f:facet name="header">
                	<icecore:defaultAction action="#{principal.closePopup}" key="Space" />
                    <ice:panelGroup style="height: 70px;">
                        <h:panelGroup style="float: left;">
                        </h:panelGroup>
                        <ice:panelGroup style="float: right;">
                            <h:commandButton image="resources/css/images/popup-close.png"
                                             alt="Close" title="Close"
                                             style="height: 11px; width: 11px; border: 0;"
                                             action="#{principal.closePopup}"/>
                        </ice:panelGroup>
                    </ice:panelGroup>
                </f:facet>
                <f:facet name="body">
                	<icecore:defaultAction action="#{principal.closePopup}" key="F9" />
                    The panelPopup is a container component that renders a window or panel that hovers on top of a web page.
                    The popupPanel contains two regions which are defined using facets. The facet names are: header and body.
                    The panelPopup component can be used to provide a general popup window behavior such as draggable or modal.
                </f:facet>
                <icecore:defaultAction action="#{principal.closePopup}" key="Esc" />
            </ice:panelPopup>
       </h:form>
       
       <h:form>
       	<a id="scrollUp" href="#">up</a>
<a id="scrollDown" href="#">down</a>

<div id="wrapper">
    <div id="content" style="height: 70px; width: 300px; overflow-y: hidden;">
        
        <ul>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>            
        </ul>
        
    </div>
    
    <a id="scrollLeft" href="#">Left</a>
    <a id="scrollRight" href="#">Right</a>
    <div id="contentLarge" style="width: 200px;overflow-x: hidden;margin-top: 10px;">
        <div style="height: 150px;width: auto;">
        
        
            <div style="display: table-cell;">some content here</div>
            <div style="display: table-cell;">some content here</div>
            <div style="display: table-cell;">some content here</div>
            <div style="display: table-cell;">some content here</div>
            <div style="display: table-cell;">some content here</div>
            <div style="display: table-cell;">some content here</div>
            <div style="display: table-cell;">some content here</div>
            <div style="display: table-cell;">some content here</div>
            <div style="display: table-cell;">some content here</div>
            <div style="display: table-cell;">some content here</div>
            <div style="display: table-cell;">some content here</div>
            <div style="display: table-cell;">some content here</div>
            <div style="display: table-cell;">some content here</div>
            <div style="display: table-cell;">some content here</div>
            <div style="display: table-cell;">some content here</div>

    </div>
        </div>
</div>
       	
       </h:form>
    </h:body>
</html>